<style lang="scss">
  @import '../uv.scss';
</style>
<template>
  <uv-popup closeable ref="popup" mode="center" round="10" @change="closeChange" :closeOnClickOverlay="false">
    <div style="overflow-y: auto;max-height: 95vh;">
      <div class="p1756879647" v-if="showType == '开始服务'">
        <div class="fz44" style="font-weight: 500;">【温馨提醒】服务记录需知</div>
        <div class="fz30 pt30 pl20  pb30" style="font-weight: 500;color: #3D3D3D;">服务过程中，请<div
            style="color: #EC1C2D;display: inline;">拍摄宠物状态照片</div>或<div style="color: #EC1C2D;display: inline;">录制过程视频。
          </div>
          订单完成后请及时提交记录，感谢您的 细致服务!
        </div>
      </div>
      <div class="p1756879647" v-if="showType == '我已购买'">
        <div class="fz44" style="font-weight: 500;line-height: 1.2;">请拍照上传购物小票并填写准确金额以便顾客及时支付</div>
        <div class="fz30 pt30 pb30" style="font-weight: 500;color: #3D3D3D;line-height: 1.3;">为避免产生费用争议，您需要上传<div
            style="color: #EC1C2D;display: inline;">购物小票</div>和<div style="color: #EC1C2D;display: inline;">支付凭证</div>
          并
          <div style="display: inline;color: #EC1C2D;">
            填写准确金额</div>。系统会自动将照片 发送给顾客，照片仅用于核查餐品费用情况， 不做其它商业用途。
        </div>
        <div class="pt30 pb30">
          <uv-upload @delete="deletePic" @afterRead="afterRead" style="line-height:1;" :fileList="fileList" name="6"
            :maxCount="3">
            <div class="p1756879768 fac jcc">
              <uv-icon size="70rpx" color="#979898" name="camera"></uv-icon>
              <div class="fz24 pt10 " style="line-height:1;color: #979898;">上传图片</div>
            </div>
          </uv-upload>
        </div>
        <div>
          <div>请准确输入金额</div>
          <div class="f p1756888019" @click="$refs.keyboard.open()"  style="font-weight: 500;font-size: 46rpx;">
            ¥ <uv-input readonly v-model="form.advance_payment_price" placeholder="元"
              border="none"></uv-input>
          </div>
        </div>
        <!-- <button class="p1756191456 common-button fz30  pt10 pb10"
          style="width: 100%; border: 2rpx solid #C9CACA;color: #333!important;background-color: #fff!important;">确认</button> -->
        <button @click="priceTap" class="p1756191456 common-button fz30  pt10 pb10"
          style="width: 100%;color: #fff;background-color: #E60012!important;">确认</button>
      </div>
      <div class="p1756879647" v-if="showType == '发起支付'">
        <div class="fz44 pt30 pb30" style="font-weight: 500;">完成购买，向顾客发起支付</div>
        <div class="fz24 fac jcc" style="color: #595757;">购买凭证</div>
        <div class="pt30 p1756889184 pb30">
          <uv-upload :deletable="false" :fileList="fileList" name="6" :maxCount="fileList.length"></uv-upload>
        </div>
        <div class="fz30 fac jcc" style="color: #333;font-weight: 500;">商品费</div>
        <div>
          <div class="fac jcc " style="font-weight: 500;font-size: 46rpx;">
            ¥ <div style="font-weight: 500;font-size: 50rpx;">{{taskForm.advance_payment_price}}</div>
          </div>
          <div class="fz24 fac jcc pb30 " style="color: #EC1C2D;">商品费用为骑士填写，请仔细核对账单的商品费用</div>
        </div>
        <button @click="payPriceTap" class="p1756191456 common-button fz30  pt10 pb10"
          style="width: 100%;color: #fff;background-color: #E60012!important;">确认发起</button>
      </div>
      <template v-if="showType == '上报到位置' || showType == '送达'">
        <div class="p1756792832">
          <img v-if="taskForm.type == 4 || taskForm.type == 5" style="width: 85vw"
            src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0903/90328202509030904462470.png"
            alt="">
          <img v-else-if="showType == '送达'" style="width: 85vw"
            src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0903/e841520250903090420703.png" alt="">
          <img v-else-if="showType == '上报到位置'" style="width: 85vw"
            src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0903/9762f202509030903579071.png"
            alt="">

        </div>
        <div class="p1756792635 " style=" font-weight: 500;">
          <div style="font-size: 42rpx;">
            检测到你还没到<div style="display: inline;" v-if="taskForm.type == 4 || taskForm.type  == 5">服务地</div>
            <div style="display: inline;" v-else>{{showType == '送达' ? '送货地' : '取货地'}}</div>
          </div>
          <div v-if="taskForm.type  == 1 || taskForm.type  == 2" class="pt10 pb30"
            style="font-size: 42rpx;color: #EC1C2D;">
            “{{taskForm.pickup_address_storey}}<div class="" v-if="taskForm.pickup_address_house_number"
              style="display: inline;line-height: 1;">({{taskForm.pickup_address_house_number}})</div>”
          </div>
          <div v-if="taskForm.type  == 3 " class="pt10 pb30" style="font-size: 42rpx;color: #EC1C2D;">
            “{{taskForm.purchase_shop_title}}”
          </div>
          <div v-if="taskForm.type  == 4 || taskForm.type  == 5" class=" pb30" style="font-size: 40rpx;color: #EC1C2D;">
            “{{taskForm.delivery_address_storey}}<div class="" v-if="taskForm.delivery_address_house_number"
              style="display: inline;line-height: 1;">({{taskForm.delivery_address_house_number}})</div>”
          </div>
          <div class="fz32  pb20">{{taskForm.type == 4 || taskForm.type == 5 ?'请你在用户位置确认到达': '请你在商家位置确认取货'}}</div>
          <div class="fz30 p1756792740 p30">
            <div class="fz30">如果你遇到以下问题：</div>
            <div class="fac pt10" style="color: #727171;">
              <div class="p1756792950"></div> 商家地址/取货地地址错误
            </div>
            <div class="fac pt10" style="color: #036EB8;">请点击这里解决<uv-icon size="32rpx" color="#036EB8"
                name="arrow-right"></uv-icon></div>
          </div>
          <!-- <u-slide-unlock @success="$emit('success')"></u-slide-unlock> -->
          <button @click="wysdTap" class="common-button fz36  pl0 pr0 ml0 mr0 "
            style="border:1rpx solid #EC1C2D;overflow: hidden;border-radius: 30rpx;height:100rpx;width: 100%;color: #fff;background-color: #EC1C2D;">确定</button>

          <div class="pt20"></div>
          <div @click="closeTap" class="common-button fz30  "
            style="width: 100%;color: #727171;background-color: #fff;">稍后再说</div>

        </div>
      </template>
      <div class="p1756879647" v-if="showType == '我已送达' || showType == '我已完成'">
        <div v-if="taskForm.type == 1 || taskForm.type == 2 || taskForm.type == 3" class="fz44"
          style="font-weight: 500;line-height: 1.2;">订单已送达，顾客地址为临时放餐点，请及时拍照并告知顾客</div>
        <div v-if="taskForm.type == 1 || taskForm.type == 2 || taskForm.type == 3" class="fz30 pt30 pb30"
          style="font-weight: 500;color: #3D3D3D;">为避免产生交餐争议，您需要上传<div style="color: #EC1C2D;display: inline;">
            至少1张真实、准确的放餐照片</div>并<div style="display: inline;color: #EC1C2D;">
            及时致电顾客</div>。系 统会自动将照片发送给顾客，照片仅用于核查餐品送达情况，不做其它商业用途。</div>
        <div v-if="taskForm.type == 4 || taskForm.type == 5" class="fz44" style="font-weight: 500;margin-left:-20rpx">
          【订单完成】请上传服务记录
        </div>
        <div v-if="taskForm.type == 4 || taskForm.type == 5" class="fz30 pt30 pb30  "
          style="font-weight: 500;color: #3D3D3D;">您已完成本次宠物服务订单，请尽快上传服 务过程中的照片和视频至订单页面。完整记 录将帮助主人了解宠物情况，感谢您的配合!</div>
        <div class="pt30  pb30">
          <uv-upload @delete="deletePic" @afterRead="afterRead" style="line-height:1;" :fileList="fileList" name="6"
            :maxCount="3">
            <div class="p1756879768 fac jcc">
              <uv-icon size="70rpx" color="#979898" name="camera"></uv-icon>
              <div class="fz24 pt10 " style="line-height:1;color: #979898;">上传图片</div>
            </div>
          </uv-upload>
        </div>
        <!-- <button class="p1756191456 common-button fz30  pt10 pb10"
          style="width: 100%; border: 2rpx solid #C9CACA;color: #333!important;background-color: #fff!important;">确认</button> -->
        <button @click="submitHaveDeliveredTap" class="p1756191456 common-button fz30  pt10 pb10"
          style="width: 100%;color: #fff;background-color: #E60012!important;">确认</button>
      </div>
    </div>
    <u-keyboard @confirmTap="keyboardConfirm" ref="keyboard" :tipsValue="form.advance_payment_price"></u-keyboard>

  </uv-popup>
</template>
<script>
  import keyboardPopupVue from '@/components/keyboardPopup.vue'
  import { uploadImage } from '@/api/index.js'
  export default {
    components: {
      'u-keyboard': keyboardPopupVue,
    },
    props: {
      taskForm: {
        type: Object,
        default: {}
      },
    },
    data() {
      return {
        showType: '',
        form: {
          advance_payment_price: null,

        },
        fileList: []
      }
    },
    methods: {
         keyboardConfirm(value) {
        this.$set(this.form, 'advance_payment_price', value)
      },

      wysdTap() {
        if (this.showType == '送达') {
          this.showType = '我已送达'
          this.fileList = []
        } else {
          this.$emit('success', { showType: this.showType })
        }
      },
      afterRead(file) {
        uni.showLoading({ title: '上传中', mask: true })
        uploadImage({ name: 'file', filePath: file.file.thumb }).then(res => {
          uni.hideLoading()
          if (res.code === 0) this.fileList.push({ url: res.data })
        })
      },
      deletePic(item) {
        this.fileList.splice(item.index, 1)
      },
      priceTap() {
        if (!this.form.advance_payment_price) return uni.$uv.toast('请输入金额')
        if (!this.fileList.length) return uni.$uv.toast('请上传图片')
        this.$emit('success', { showType: '我已购买', advance_payment_price: this.form.advance_payment_price, fileList: this.fileList.map(i => i.url) })
      },
      submitHaveDeliveredTap() {
        if (!this.fileList.length) return uni.$uv.toast('请上传图片')
        this.$emit('success', { showType: this.showType, fileList: this.fileList.map(i => i.url) })
      },
      payPriceTap() {
        this.$emit('success', { showType: '发起支付', advance_payment_price: this.taskForm.advance_payment_price, fileList: this.fileList.map(i => i.url) })
      },
      openFun(value) {
        this.showType = value
        this.$refs.popup.open()

        this.$nextTick(() => {
          let fileList = []
          if (this.taskForm.type == 3 && this.taskForm.service_status == 3 && this.taskForm.advance_payment_images) {
            fileList = JSON.parse(JSON.stringify(this.taskForm.advance_payment_images)).map(i => {
              return {
                url: i
              }
            })
          }
          if (this.showType == '我已送达' || this.showType == '我已完成') fileList = []
          this.fileList = fileList
        })
      },
      closeChange(value) {
        this.fileList = []
        this.$set(this.form, 'advance_payment_price', null)
        this.showPay = false
        if (this.showType == '开始服务' && !value.show) {
          this.showType = ''
          this.$emit('success', { showType: '开始服务' })
        }
      },
      closeTap(value) {
        this.$refs.popup.close()
      },
    },
  }
</script>
<style lang="scss" scoped>
@import '../common.scss';
  .p1756792635 {
    color: #333;
    background-color: #fff;
    width: 84vw;
    padding: 0 30rpx 60rpx 30rpx;
    box-sizing: border-box;
  }

  .p1756792832 {
    max-height: 330rpx;
    height: 330rpx;
  }

  .p1756792740 {
    background: #F7F7F7;
    border-radius: 10rpx;
    margin-bottom: 30rpx;
  }

  .p1756792950 {
    width: 5rpx;
    height: 5rpx;
    min-width: 5rpx;
    min-height: 5rpx;
    background: #727171;
    border-radius: 50%;
    margin-right: 20rpx;
  }

  .p1756191456 {
    height: 100rpx;
    border-radius: 30rpx;

    box-sizing: border-box;
    margin-top: 30rpx;
    overflow: hidden !important;
  }

  .p1756879647 {
    width: 85vw;
    padding: 90rpx 30rpx 60rpx 30rpx;
    box-sizing: border-box;
  }

  .p1756879768 {
    flex-direction: column;
    border: 2rpx solid #c7c7c7;
    border-radius: 10rpx;
    width: calc(28vw - 33rpx);
    height: calc(28vw - 33rpx);
  }
</style>